<style type="text/less">
    @import "/web/public/public.less";
    .ad-shade-wrap{
        position: fixed;
        z-index: 999;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 350px;
        #close-ad-shade{
            cursor: pointer;
            &:hover{
                p{
                    color: #df3031;
                }
            }
        }
        i {
            z-index: 1200;
            position: absolute;
            right: 79px;
            color: #dddddd;
            font-size: 30px;
        }
        .add_time{
            z-index: 1200;
            position: absolute;
            top: 32px;
            right: 64px;
            color: #000000;
            font-size: 18px;
        }
        a {
            display: inline-block;
            width: 100%;
            height: 350px;
        }
        .ad-shade{
            width: 100%;
            height: 350px;
            background:url(${adList.imgUrl}) center top;
            background-size:100% 100%; 
            .add_tag{
                position: absolute;
                top: 10px;
                right: 15px;
                padding: 2px;
                color: #ffffff;
                font-size: 12px;
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<#if adList.adShowStatus == 1>
    <div id="ad-shade-wrap" class="ad-shade-wrap" style="display: none">
        <div id="close-ad-shade">
            <i class="iconfont icon-guanbi1"></i>
            <p class="add_time"><span id="time">15S</span>关闭</p>
        </div>
        <#if adList.jumpUrl?? && adList.jumpUrl != ''>
            <a href="${adList.jumpUrl}" target="_blank" rel="nofollow">
                <div id="ad-shade" class="ad-shade">
                    <p class="add_tag">广告</p>
                </div>
            </a>
        <#else>
            <a href="javascript:" rel="nofollow">
                <div id="ad-shade" class="ad-shade">
                    <p class="add_tag">广告</p>
                </div>
            </a>
        </#if>
    </div>
    <script>
        var time = 15;
        var timer;
        window.onload = function () {
            // 获取广告位缓存状态
            // 如果没有获取到广告位--设置该广告的展示状态
            $('#ad-shade-wrap').css("display","");
            // 执行广告位倒计时关闭方法
            timer = setInterval("timeOutClose()",1000);
        };
        // 关闭按钮点击事件
        $('#close-ad-shade').click(function () {
            closeAd();
        });
        // 倒计时方法
        function timeOutClose() {
            if (time === 1){
                // 关闭当前广告
                closeAd();
                // 关闭倒计时
                clearInterval(timer);
            } else {
                time --;
                document.getElementById('time').innerHTML = time+"S";
                // console.log('倒计时结束的时间'+time)
            }
        }
        // 关闭广告位方法
        function closeAd() {
            $('#ad-shade-wrap').css("display","none");
        }
    </script>
</#if>
